<template>
<view>
   <u-navbar :is-back="false" title="账单详情"
     title-size="30"
     :background="{background:'#2B88FE' }"
     title-color="#fff">
     <div class="head_icon">
       <u-icon @click="$api.handleBackTo"
         name="arrow-left" color="#fff"
         size="36">
       </u-icon>
       <u-icon @click="$api.handleHomeTo"
         name="home" color="#fff" size="36">
       </u-icon>
     </div>
   </u-navbar>

	
  <CommDetail :cid="cid" :info="info" :current="2">
    <view class="cons whiteBg">
     

			   
      <view class="topBox whiteBg">
        <view class="info  x-row">
          <view class="x-col">
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      账单类型：</view>
			    {{detail.fWillTypeName}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      账单状态：</view>
			    {{detail.fStatusName}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      付款状态：</view>
			    {{detail.fPayStatusName}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      审核状态：</view>
			    {{detail.fPassStatusName}}
			  </view>
            <view class="itxt">
              <view class="s1 u-skeleton-fillet">
                账单金额：</view>
              {{detail.fMoney}}
            </view>
            <view class="itxt">
              <view class="s1 u-skeleton-fillet">
                已付金额：</view>
              {{detail.fPayMoney}}
            </view>
            <block>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  未付金额：</view>
                {{detail.fNoPayMoney}}
              </view>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  账单时间：</view>
                {{detail.fNeedPayTime}}
              </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      提交人：</view>
			    {{detail.fUserName}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      提交时间：</view>
			    {{detail.fCreateTime}}
			  </view>
            </block>
            <block>
              <view class="itxt" >
                <view class="s1 u-skeleton-fillet">
                  账单凭证：</view>
				  
				    <view   v-for="(item,index) in detail.PicList" :key="index">						
                         <image :src="imgPic+item" mode=""  @click="imgshow(item)" />
				   </view>
              </view>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  账单说明：</view>
                {{detail.fInfo}}
              </view>
            </block>
          </view>
        </view>

  <view   v-if="detail.fStatus<10 && detail.fStatus>0"
    class="interval u-skeleton-rect">
    付款记录 <u-button  v-if="detail.fPassStatus>0" style="margin:20rpx" size="mini" type="primary"  
  		 @click="OnClinkT">+付款</u-button>
		 <u-button  v-if="detail.fPassStatus>0" style="margin:20rpx" size="mini" type="primary"
		 	 @click="OnClinkTK">退款</u-button>
		 <u-button  v-if="detail.fPassStatus!=10" style="margin:20rpx" size="mini" type="primary"
		 	 @click="OnClinkEdit">编辑</u-button>
			 <u-button  v-if="detail.fPassStatus==1" style="margin:20rpx" size="mini" type="primary"
			 	  @click="showPay=true">红冲</u-button>
		 </view> 
 <u-table>
	   <u-tr>
	     <u-th>支付金额</u-th>
	     <u-th>支付方式</u-th>
	     <u-th>支付时间</u-th>
	     <u-th>状态</u-th>
	   </u-tr>
	   <u-tr v-for="(g,index) in paylist" :key="index">
	     <u-td>
	       {{g.fPayMoney}}
	     </u-td>
	     <u-td>
	       {{g.fPayType}}
	     </u-td>
	     <u-td>
	       {{g.fPayTime}}
	     </u-td>
	     <u-td>
	       <navigator :url="`/pages/my_customer/PayWillPayDetail?id=${g.fMrkId}&payid=${g.fId}`">
	         <div class="yi"> {{g.fStatus}}
	         </div>
	       </navigator>
	     </u-td>
	   </u-tr>
	 </u-table>

      </view>

    </view>

  </CommDetail>
	<view
	  :style="{height:height}">
	</view>
	<u-modal v-model="showPay"
	  @confirm="confirmPay"
	  :title-style="{color: '#191F25'}"
	  title="账单红冲" width="70%"
	  :show-cancel-button="true"
	  confirm-text="确定"
	  cancel-text="取消"
	  cancel-color="#3296FA"
	  confirm-color="#3296FA">

	   
	   <view class="details">
 
	     <view class="detaItem">
	       <view class="title">
	         请输入理由：</view>
	       <u-input type="textarea" border value="" placeholder="请输入内容" v-model="Hongform.Info" />
	     </view>
	   </view>
	   
	   
	</u-modal>
	<u-skeleton
	  :loading="loading"
	  :animation="true"
	  bgColor="#FFF">
	</u-skeleton>
</view>	</template>

<script>
import CommDetail from './commdetail'
export default {
  components: { CommDetail },
  data() {
    return {
      cid: 0,
	   willid: 0,
      info: {},
      detail: {},
	   paylist: [],
      imgPic: this.urlimg,
      form: {
        totalNum: 0,
        total: 0,
        list: []
      },
	  Hongform: {
	    WillId: 0,
	    Info: ''
	  },
      height: this.but_height(),
	  showPay: false,
	  payform: {
	    OrderId: 0,
		WillId: 0,
	    MrkId: 0,
	    OrderOrWill: 2
	  }
    }
  },
  onLoad(e) {
    this.cid = Number(e.id)
	  this.willid = Number(e.willid)
    this.$axios('api/MrkBasic/GetDetail', 'post', {
      value: e.id
    }).then(res => {
      this.info = res.Value
      this.loading = false
      return res.Value
    })
	
    this.$axios('api/MrkNoPayWill/GetDetail', 'post', { value: e.willid }).then(res => {
      this.detail = res.Value
    })
	this.getList()
  }
  ,
  methods: {
    
    imgshow(picurl) {
      let arr = [this.urlimg + picurl]
      uni.previewImage({
        urls: arr,
        current: arr[0]
      })
    },
	getList() {
		 this.payform.OrderId=this.detail.fOrderId
		  this.payform.WillId=this.willid
	     this.$axios('api/PayInfo/GetPayInfoList', 'post', { value: this.payform }).then(res => {
	     this.paylist = res.Value.List
	  })
	},
	confirmPay() {
	  let that = this
	  if (!this.Hongform.Info) {
	    uni.showToast({
	      title: '请输入理由',
	      icon: 'none'
	    })
	    return
	  }
	    this.Hongform.WillId=this.willid
        this.$axios('api/MrkNoPayWill/UpdateHongChong', 'post', { value: this.Hongform }).then(res => {
	    if (!res.Success) {
	      uni.showToast({
	        title: '提交失败：' + res.Message,
	        icon: 'none',
	        duration: 2000
	      })
	     
	      return false
	    }
	  			 
	  					uni.showToast({
	  					  title: '提交成功',
	  					  icon: 'none',
	  					  duration: 2000
	  					})
	  					
	  					 this.$axios('api/MrkNoPayWill/GetDetail', 'post', { value: this.willid }).then(res => {
	  					   this.detail = res.Value
	  					 })
	   
	    
	          })
	},
	OnClinkT() { 
	  uni.navigateTo({
	    url: `/pages/my_customer/PayWillPayAdd?id=${this.cid}&willid=${this.willid}`
	  })
	},
	OnClinkTK() {
	  uni.navigateTo({
	    url: `/pages/my_customer/PayWillPayBack?id=${this.cid}&willid=${this.willid}`
	  })
	},
	OnClinkEdit() {
	  uni.navigateTo({
	    url: `/pages/my_customer/PayWillEdit?id=${this.cid}&willid=${this.willid}`
	  })
	}
	 
  }
}
</script>

<style lang="scss" scoped>
page {
  padding: 0 20rpx;
}
.goodBox {
  padding-left: 24rpx;
  box-sizing: border-box;
  .gtit {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    padding: 18rpx 8rpx;
  }
  .glist {
    padding: 32rpx 32rpx 32rpx 0;
    box-sizing: border-box;
    .gimg {
      width: 144rpx;
      height: 144rpx;
      margin-right: 24rpx;
    }
    .gname {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 30rpx;
      height: 80rpx;
    }
    .num {
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
      line-height: 24rpx;
    }
    .price {
      font-size: 32rpx;
      font-weight: bold;
      color: #000000;
      line-height: 40rpx;
      text {
        font-size: 24rpx;
      }
    }
  }
}
.totalrow {
  margin: 20rpx 0;
  padding: 40rpx 0;
  text-align: center;
  .tname {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 44rpx;
  }
  .tnum {
    font-size: 48rpx;
    font-weight: 500;
    color: #111111;
    line-height: 64rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }
  image {
    width: 100rpx;
    height: 100rpx;
  }
  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}
</style>